<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>科普文章</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="css/knowledge.css" />
	</head>

	<body>
		<div id='app' v-cloak>
			<div class="id_container">
				<div class="k_category">
					<ul class="k_category_ul">
						<li v-for="item in category" @click="linkToList(item.classId)">
							<img :src="item.categoryIcon"/>
						</li>
					</ul>
				</div>
				<div style="margin: 0 0.2rem;">
					<van-list
						class='k_list'
						v-if="nothing==1"
						v-model="loading"
						:finished="finished"
						finished-text="没有更多了"
						@load="onLoad">
						<div class="k_item flex" @click="linkToDetail(item.contentId)" v-for="item in detail">
							<div class="k_item_left">
								<p class="k_item_title">{{item.title}}</p>
							</div>
							<div class="k_item_right">
								<img :src="item.image" />
							</div>
						</div>			
					</van-list>
					<van-empty v-if="nothing==2"
						class="custom-image"
						image="img/blank_pic.png"
						description="暂无数据"
						/>
				</div>
				
			</div>

		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>
	<script type="module">
		import {
			getAction,
			postAction,
			spliceWebsiteUrl,
		} from "../common/js/api/vue3-axios-utils.js";

		const PatientData = {
			data() {
				return {
					url: {
						getCategoryDetail:'/article/category',
						getListDetail:'/article/list',
					},
					detail:[],
					category:[],
					nothing:2,
					page:1,
					pageSize:10,
					total_page:0,
					finished:false,
					loading:false,
					refreshing:false
				};
			},
			created() {
				this.articleCategory = url('?articleCategory')
				this.init()
			},
			methods: {
				async init () {
					await this.handleCategoryDetail();
					await this.handleListDetail();
				},
				handleCategoryDetail(){
					getAction(spliceWebsiteUrl(this.url.getCategoryDetail),{}).then((res) => {
						res = res.data
						console.log('handleCategoryDetail',res)
						if(res.success){
							if(res.result){
								this.category = res.result
							}
						}
					})
				},
				handleListDetail(){
					postAction(spliceWebsiteUrl(this.url.getListDetail),{articleCategory:this.articleCategory,pageNum:this.page,pageSize:this.pageSize}).then((res) => {
						res = res.data
						console.log('handleListDetail',res)
						if(res.success){
							if(res.result.records.length>0){
								this.nothing = 1
								this.total_page=res.result.pages
								this.total = res.result.total
								for(var i=0;i<res.result.records.length;i++){
									this.detail.push(res.result.records[i])
								}
							}else{
								this.nothing = 2
								this.detail = []
							}

						}else{
							this.nothing = 2
							this.detail = []
						}
					})
				},
				linkToList(id){
					this.articleCategory = id;
					this.page = 1
					this.loading = false;
					this.finished = false;
					this.detail = []
					this.handleListDetail()
				},
				linkToDetail(id){
					window.location.href = './article.html?articleId='+id
				},
				onLoad(){
					console.log('onload',this.page)
					if(this.page<this.total_page){
						this.page++
						this.handleListDetail()
					}
					this.loading = false;
					if(this.detail.length>=this.total){
						this.finished = true
					}
				}
			},
			components:{
			}
		};

		const app = Vue.createApp(PatientData);

		app.use(vant);

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload);

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount("#app");
	</script>

</html>

